<template>
	<view class="tabbar">
		<!-- 滚动区域 -->
		<scroll-view class="tabbar-scroll"
			scroll-x="true"
			:scroll-into-view="currentIndex"
			:scroll-with-animation="true"
		>
			<view class="tabbar-scroll-box">
				<view 
					:id="`item${index}`"
					class="tabbar-scroll-item"
					:class="{active: activeIndex === index}"
					v-for="(item, index) in labelList" :key="item._id"
					@click="handleActiveIndex(index)"
				>
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
		<!-- 设置 -->
		<view class="tabbar-icon">
			<uni-icons type="gear" size="26" color="666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		
		name:"TabBar",
		
		props: {
			activeIndex: Number,
			labelList: Array
		},
		
		watch: {
			activeIndex(newIndex) {
				this.currentIndex = `item${newIndex}`;
			}
		},
		
		data() {
			return {
				currentIndex: `item0`
			};
		},
		
		methods: {
			handleActiveIndex(newIndex) {
				this.$emit('changeActiveIndex', newIndex);
			}
		},
		
		created() {
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "./css/TabBar.scss";
</style>